import React, { Component } from 'react'
import './telLogin.scss'
import {connect} from 'react-redux'
import {Toast} from 'antd-mobile'
import axios from 'axios'

let tel=/^(1[3-9])([0-9]{9})$/

function showToast(value) {
  Toast.info(value, 1);
}

function successToast(value) {
  Toast.success(value, 1);
}

class telLogin extends Component {
  constructor(){
    super()
    this.state={
      code:'123',
      showCode:false,
      showTime:false,
      time:16,
      codeValue:'',
      check:true,
      list:[
        {id:1},
        {id:2},
        {id:3},
      ]
    }
  }
  
  render() {
    return (
      <div id='loginWap'>
        <div className='loginBox'>
          <div className='loginbox1'><img src='//yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png' alt=''></img></div>
          <div className='loginbox2'>
            <p className='telBox border-bottom'><input placeholder='请输入手机号'
            value={this.props.telValue}
            onChange={(e)=>{this.props.change(e.target.value)}}  
            onBlur={(e) =>{ 
              if(!tel.test(e.target.value)){
                showToast('手机号不正确')
              this.setState({
                showCode:false
              })
              return
            }else{
              this.setState({
                showCode:true
              })
            }
          }}/></p>
            <p className='telBox1 border-bottom'><input placeholder='请输入短信验证码' value={this.state.codeValue} onChange={(e) =>{this.setState({codeValue:e.target.value})}}/>
              {this.state.time === 16? <span
              onClick={this.setInt} className='timeStlye'>获取验证码</span>
              :<span className='timeStlye'>{this.state.time}秒</span>}</p>
            <p className='telBox2'><span onClick={() =>{this.props.history.push('/login/register')}}>注册用户</span><span onClick={() =>{this.props.history.push('/login/userLogin')}}>账号密码登录</span></p>
            <p className='loginButton' onClick={this.login}>登录</p>
            <p className='clicklogin'><input type='checkbox' checked={this.state.check} onChange={() =>{this.setState({check:!this.state.check})}}/>我同意《服务条款》和《网易隐私政策》</p>
            <p className='hisLogin'><span onClick={() =>{this.props.history.push('/login')}}>其他登录方式</span></p>
          </div>
        </div>
      </div>
    )
  }

  setInt =()=>{
    if(!this.state.showTime && this.state.showCode){
      this.setState({
        time:15
      })
      this.timeIn1 =  setInterval(()=>{
        this.setState({
          time:this.state.time-1
        })
        if(this.state.time <= 0){
          this.setState({
            time:16,
            showTime:false
          })
          clearTimeout(this.timeIn1)
        }
      },1000)
      this.setState({
        showTime:true,
        poptel:this.props.telValue
      })
      return
    }
    showToast('请输入正确手机号')
  }
  login =()=>{
    if(!this.state.check){
      showToast('请同意霸王条款')
      return
    }
    else if(this.state.code === this.state.codeValue){
      axios.post('http://10.36.149.139:9000/api/user/login',{
            tel:this.props.telValue,
            type:'code'
            }).then(({data})=>{
              if(data.code === -1){
                showToast(data.message)
                return
              }
              successToast('登录成功')
              this.props.saveState(data)
              localStorage.setItem('loginId',JSON.stringify(data))
              this.props.history.push('/')
          })
          return
    }
    showToast('验证码错误')
  }

  componentDidMount(){
    
  }

  componentWillUnmount(){
    clearTimeout(this.timeIn1)
  }
}

const mapStateToProps=(state)=>{
  return {
    telValue:state.getIn(['userReducer','userInfo','telValue'])
  }
}

const mapActionToProps=(dispatch)=>{
  return{
    change(value){
      dispatch({
        type:'changeTel',
        value
      })
    },
    saveState(value){
      dispatch({
        type:'saveState',
        value
      })
    }
  }
}

export default connect(mapStateToProps,mapActionToProps)(telLogin)